<template>
  <div class="editor">
    <div>
      <el-input
        v-show="isshow"
        v-model="main"
        type="text"
        @focus="onfocusinput"
      />
      <quill-editor
        v-show="!isshow"
        ref="edite"
        v-model="content"
        :options="editorOption"
        @blur="onEditorBlur"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      />
    </div>
    <el-button
      v-if="isdanger"
      type="danger"
      icon="el-icon-delete"
      circle
      size="mini"
      @click="removeOption"
    />
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  props: {
    main: { type: String, default: '' },
    symbol: { type: String, default: '' },
    optionsid: { type: Number, default: -1 },
    isdanger: { type: Boolean, default: false }
  },
  data: function() {
    return {
      // 控制富文本是否显示
      isshow: true,
      //   富文本编辑器参数设置
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'], // 加粗，斜体，下划线
            ['image'] // 上传图片、上传视频
          ]
        }
      },
      content: ''
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill(false)
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    // 点击删除
    removeOption() {
      this.$emit('removeoption', this.optionsid)
    },
    // input聚焦
    onfocusinput() {
      this.isshow = false
      this.content = this.main || ''
    },
    onEditorReady(editor) {
      // 准备编辑器
      console.log(editor)
    },
    // 失焦
    onEditorBlur(e) {
      console.log(e);
      this.isshow = true
    },
    onEditorFocus() {
      // this.
    }, // 获得焦点事件
    // 内容改变事件
    onEditorChange(e) {
      console.log(this.main);
      // 防抖
        this.$emit('editorchange', e.text, this.symbol, this.optionsid)
    }
  }
}
</script>
<style lang='less'>
.editor {
  display: flex;
  div {
    flex: 1;
    margin-right: 20px;
  }
  > .el-button {
    width: 40px;
    height: 40px;
  }
}
</style>
